<template>
    <el-drawer size="450px" v-model="drawerVisible" :title="`员工职位编辑`">

        <el-scrollbar>
            <el-form :model="idenData" ref="fromRef" :rules="rules" label-width="100px" label-suffix=" :">
                <el-form-item label="员工id">
                    <el-input :value="idenData.staffId" :disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="员工名字">
                    <el-input :value="staffName" :disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="职位" prop="job">
                    <el-select v-model="idenData.job" placeholder="请选择职位">
                        <el-option v-for="item in jobType" :key="item.value" :label="item.name" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="底薪" prop="salary">
                    <el-input v-model="idenData.salary" placeholder="请输入员工底薪" clearable></el-input>
                </el-form-item>

                <el-form-item label="权限" prop="power">
                    <el-input :placeholder="powerClass" :disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="所在组长名" prop="teamId">
                    <el-select v-model="idenData.teamId" placeholder="请选择组">
                        <el-option v-for="item in TeamType" :key="item.staffId" :label="item.staffName"
                            :value="item.staffId">
                            <span style="float: left">{{ item.job==1?"经理":item.job==
                            2?"项目负责人":item.job==3?"组长":item.job==4?"质检员":""}}</span>
                                <span class="yaohfLeft" >{{ item.staffName }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>


        </el-scrollbar>

        <template #footer>
            <el-button @click="cancel(fromRef)">取消</el-button>
            <el-button type="primary" @click="confirm(fromRef)">确定</el-button>
        </template>
    </el-drawer>
</template>

<script setup>

import { ref, reactive, watchEffect, computed, watch, toRaw } from "vue"
import { staffData } from "@/stores/staff.js"
import { storeToRefs } from "pinia"
import { ElMessage, ElLoading } from 'element-plus'
let drawerVisible = ref(false)
let mStaff = staffData()
let { formStaffColumnData, chargemanList } = storeToRefs(staffData())

let emit = defineEmits(["succCallback"])
// 表单的实例
let fromRef = ref()

let idenData = reactive({
    staffId: "",
    salary: "",
    power: "",
    teamId: "",
    job: "5"
})


let staffName = ref("")

let checkSalary = (rule, value, callback) => {
    let reg = /^[0-9]*$/
    if (!value) {
        return callback(new Error('请输入员工的低薪'))
    }
    if (!reg.test(value)) {
        return callback(new Error('请输入数字啊'))
    }
    if (value.toString().length < 4) {
        return callback(new Error('最少四位数，你当别人是黑奴啊'))
    }

    callback()
}
// 表单规则
let rules = reactive({
    salary: [
        { validator: checkSalary, trigger: 'blur' }
    ],
    job: [{ required: true, message: '请选择员工身份', trigger: 'change' },]

})

watchEffect(() => {
    idenData.power = idenData.job

})

// 监听仓库数据变化然后渲染
watch(formStaffColumnData, (e) => {

    idenData.staffId = e.staffId
    idenData.salary = e.salary
    idenData.teamId = e.teamId
    idenData.job = e.job
    staffName.value = e.staffName

})

let powerClass = computed(() => {
    // console.log(idenData.job,"dede")
    switch (true) {
        case idenData.job < 3:
            return "超级权限";
        case idenData.job == 3:
            return "中级权限";
        case idenData.job == 4:
            return "中级权限"
        case idenData.job == 5:
            return "普通权限"
        default:
            return "普通权限"
    }
})
// 职位选择
let jobType = reactive([
    {
        name: "系统开发员",
        value: "0"
    },
    {
        name: "经理",
        value: "1"
    }, {
        name: "项目负责人",
        value: "2"
    }, {
        name: "组长",
        value: "3"
    }, {
        name: "质检员",
        value: "4"
    }, {
        name: "内容审核员",
        value: "5"
    }
])


let TeamType = ref([])

watch(chargemanList, (e) => {
    TeamType.value = toRaw(e)
})

let openDoorTrue = (bo) => {
    drawerVisible.value = bo
    // idenData.sra
}

// 取消
let cancel = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
    drawerVisible.value = false
}

// 提交

let confirm = (formEl) => {

    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            let data = toRaw(idenData)
            let res = await mStaff.setStaffIden(data)
            if (res == "ok") {
                emit("succCallback")
                cancel(fromRef.value)
            }

        } else {

            return false
        }
    })
}

defineExpose({
    openDoorTrue
})

</script>

<style lang="scss" scoped>
    .yaohfLeft{
      float: right;
      color: var(--el-text-color-secondary);
      font-size: 13px }
    
</style>